<template>
	<view class="template-message">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :bottomShadow="false" backTitle=" ">
			<view class="">
				<text class="tn-text-lg">信息修改</text>
				<text class="tn-text-xl"></text>
			</view>
		</tn-nav-bar>
		<view class="card" :style="{paddingTop: vuex_custom_bar_height + 'px;'}">
			<uni-forms ref="form" :modelValue="formData" class="forms">
				<uni-forms-item label="头像">
					<view class="value">
						<image :src="formData.tximg"></image>
						<view class="upload-btn" @click="updateTX">更换头像</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="手机号码">
					<input type="text" v-model="formData.sjhm" placeholder="请输入手机号">
				</uni-forms-item>
				<uni-forms-item label="姓名">
					<input type="text" v-model="formData.xm" placeholder="请输入姓名">
				</uni-forms-item>
				<uni-forms-item label="企业名称">
					<input type="text" v-model="formData.qymc" placeholder="请输入企业名称">
				</uni-forms-item>
				<uni-forms-item label="地址">
					<input type="text" v-model="formData.qydz" placeholder="请输入地址">
				</uni-forms-item>
				<uni-forms-item label="职位">
					<input type="text" v-model="formData.zhiwei" placeholder="请输入职位">
				</uni-forms-item>
				<!-- <uni-forms-item label="微信号">
					<input type="text" v-model="formData.wxh" placeholder="请输入微信号">
				</uni-forms-item> -->
				<uni-forms-item label="邮箱">
					<input type="text" v-model="formData.email" placeholder="请输入邮箱">
				</uni-forms-item>
				<uni-forms-item label="生日">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"
					 style="height:100%;display:flex;align-items: center;">
						<view class="uni-input">{{date}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="性别">
					<radio-group name="性别" @change="bindRadioChange" style="height:100%;display:flex;align-items: center;">
						<label>
							<radio value="男" :checked="formData.xb === '男'" style="transform: scale(0.7);" /><text>男</text>
						</label>
						<label>
							<radio value="女" :checked="formData.xb === '女'" style="transform: scale(0.7);" /><text>女</text>
						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item label="常住城市">
					<tn-picker mode="region" :value="regionShow" :params="{province: true, city: true}" 
					:defaultRegin="['湖南省','长沙市']" @cancel="regionShow = false" @confirm="bindRegionChange"></tn-picker>
					<input type="text" :disabled="true" v-model="formData.czcs" placeholder="请选择常住城市" @click="regionShow = true">
				</uni-forms-item>
				<uni-forms-item label="企业大类" v-if="bigData.length > 0">
					<picker mode="selector" :range="bigData" @change="selectitemA" range-key="bqname"
					style="height:100%;display:flex;align-items: center;">
						<view>{{bigData[bigIndex].bqname}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="企业小类">
					 <view class="as-input" @click="openFruit">
						<view class="placeholder" v-if="formData.qyxlname==undefined||formData.qyxlname==''">请选择</view>
						<view class="as-content" v-else>{{formData.qyxlname}}</view>
						<uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item label="业务介绍">
					<uni-easyinput type="textarea" v-model="formData.ywjs" placeholder="请输入业务介绍" />
				</uni-forms-item>
				<uni-forms-item label="企业介绍">
					<uni-easyinput type="textarea" v-model="formData.qyjj" placeholder="请输入企业介绍" />
				</uni-forms-item>
			</uni-forms>
			<view class="btn">
				<view @click="identify">识别</view>
				<view @click="save">保存</view>
			</view>
		</view>
		
		<niceui-popup-select ref="showFruit" :columns="datalist" :selectValue="litterArr" :is-search="false"
		         :option="{label:'bqname', value:'iid'}" @confirm="selectitem" :showAllCheck="false"></niceui-popup-select>
	</view>
</template>

<script>
import Tools from '@/tools/config.js'
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

export default {
	name: 'card',
	mixins: [template_page_mixin],
	data(){
		const currentDate = this.getDate({
			format: true
		})
		return{
			formData:{},
			date: currentDate,
			action: Tools.host+'/mpocr.aspx', //'https://www.hualigs.cn/api/upload',
			currentDate: currentDate,
			datalist: [], // 小类数据
			litterArr:[],
			bigData: [], // 大类数据
			bigIndex: 0,
			regionShow: false
		}
	},
	onLoad(){
		this.initData()
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods:{
		bindRegionChange(e){
			console.log(e)
			this.regionShow = false
			this.formData.czcs = e.province.label+e.city.label
		},
		openFruit(){
			this.$refs.showFruit.showPopup()
		},
		selectitemA(e){
			console.log(e)
			this.bigIndex = e.detail.value
			this.formData.qydlid = this.bigData[e.detail.value].iid
			this.formData.qydlname = this.bigData[e.detail.value].bqname
			this.litterArr = []
			this.formData.qyxlid = ""
			this.formData.qyxlname = ""
			this.getClassList(this.formData.qydlid)
		},
		selectitem(e){
			console.log(e)
			this.litterArr = e
			if(e.length == 0){
				this.formData.qyxlid = ""
				this.formData.qyxlname = ""
				return
			}
			if(e.length > 4){
				this.litterArr = []
				this.formData.qyxlid = ""
				this.formData.qyxlname = ""
				uni.showToast({
					title:"最多4项",
					icon:"none"
				})
				return
			}
			this.formData.qyxlid = this.datalist.reduce((p,c)=>{
				if(e.findIndex(i=>i == c.iid) != -1){
					return [...p,c.iid]
				}else{
					return p
				}
			},[]).join()
			this.formData.qyxlname = this.datalist.reduce((p,c)=>{
				if(e.findIndex(i=>i == c.iid) != -1){
					return [...p,c.bqname]
				}else{
					return p
				}
			},[]).join()
		},
		identify(){
			let theopenid = uni.getStorageSync('openid')
			let theunionid = uni.getStorageSync('unionid')
			uni.chooseImage({
				count:1,
				success:(res)=>{
					uni.showLoading({
						title:"正在识别"
					})
					uni.uploadFile({
						url: this.action, //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							'lx': 'mpocr',
							'openid': theopenid,
							'unionid': theunionid,
						},
						success: (uploadFileRes) => {
							uni.hideLoading()
							var a = JSON.parse(uploadFileRes.data)
							console.log(a)
							if (a.return_code == 1) {
								const thejson = JSON.parse(a.data)
								this.formData.email = thejson.email
								this.formData.xm = thejson.xm
								this.formData.sjhm = thejson.sjhm
								this.formData.zhiwei = thejson.zhiwei
								this.formData.qymc = thejson.qymc
								this.formData.qydz = thejson.qydz
								console.log(this.formData,thejson)
							}
						}
					});
				}
			})
		},
		bindRadioChange(e){
			this.formData.xb = e.detail.value
		},
		bindDateChange: function(e) {
			this.date = e.detail.value
			this.formData.sr = e.detail.value
		},
		save(){
			uni.showLoading()
			let theopenid = uni.getStorageSync('openid')
			let theunionid = uni.getStorageSync('unionid')
			uni.request({
				url: Tools.host + '/wshly.ashx',
				method: 'POST',
				data: {
					'lx': 'mpxx_xg',
					'openid': theopenid,
					'unionid': theunionid,
					'mpxx': this.formData,
				},
				success: (res) => {
					//成功
					uni.hideLoading()
					if (res.data.return_code == 1) {
						uni.showToast({
							title:'修改成功',
							icon:"success"
						})
						// this.initData()
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}else{
						uni.showToast({
							title:res.data.data,
							icon:"none"
						})
					}
				},
				fail: (res) => {
					console.log('失败' + res)
				}
			});
		},
		updateTX(){
			uni.chooseImage({
				count:1,
				success:(e)=>{
					console.log("111111", e)
					let theopenid = uni.getStorageSync('openid')
					let theunionid = uni.getStorageSync('unionid')
					uni.uploadFile({
						url: Tools.host + '/tpup.aspx', //仅为示例，非真实的接口地址
						filePath: e.tempFilePaths[0],
						name: 'file',
						formData: {
							'lx': 'tpup',
							'openid': theopenid,
							'unionid': theunionid,
						},
						success: (uploadFileRes) => {
							// console.log(uploadFileRes.data);
							const a = JSON.parse(uploadFileRes.data)
							console.log(a.data)
							this.formData.tximg = a.data
						}
					});
				}
			})
		},
		async initData(){
			await this.getClassList()
			let theopenid = uni.getStorageSync('openid')
			let theunionid = uni.getStorageSync('unionid')
			uni.request({
				url: Tools.host + '/wshly.ashx',
				method: 'POST',
				data: {
					'lx': 'mpxx_xg_s',
					'openid': theopenid,
					'unionid': theunionid,
					'mpiid': this.id,
				},
				success: (res) => {
					//成功
					if (res.data.return_code == 1) {
						var thejson = JSON.parse(res.data.data)
						this.formData = thejson
						this.date = thejson.sr || this.currentDate
						this.litterArr = this.formData.qyxlid ? this.formData.qyxlid.split(","):[],
						this.bigIndex = this.formData.qydlid? this.bigData.findIndex(i=>i.iid == this.formData.qydlid) : 0
						if(!this.formData.qydlid){
							this.formData.qydlid = this.bigData[0].iid
							this.formData.qydlname = this.bigData[0].bqname
							this.getClassList(this.bigData[0].iid)
						}else{
							this.getClassList(this.formData.qydlid)
						}
						console.log(this.formData)
					}
				},
				fail: (res) => {
					console.log('失败' + res)
				}
			});
		},
		getClassList(id = ""){
			return new Promise((resolve,reject)=>{
				let theopenid = uni.getStorageSync('openid')
				let theunionid = uni.getStorageSync('unionid')
				uni.request({
					url: Tools.host + '/wshly.ashx',
					method: 'POST',
					data: {
						'lx': 'qy_lb',
						'openid': theopenid,
						'unionid': theunionid,
						'iid':id
					},
					success: (res) => {
						//成功
						resolve()
						if (res.data.return_code == 1) {
							var thejson = JSON.parse(res.data.data)
							console.log(thejson)
							if(!id){
								// 大类数据
								this.bigData = thejson
							}else{
								this.datalist = thejson
								console.log('11111',this.datalist)
							}
						}
					},
					fail: (res) => {
						reject()
						console.log('失败' + res)
					}
				});
			})
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
}
	
</script>

<style lang="scss" scoped>

.as-input{
    width: 100%;
	height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .customer-icon{
        padding: 0 0 0 5rpx;
    }
    .placeholder{
        font-size:33rpx;
        color:#999;
    }
    .as-content{
        color: #333;
        font-size: 33rpx;
    }
}
	
	
.card{
	// height: 100vh;
	padding-right: 28rpx;
	padding-left: 28rpx;
	padding-bottom: 40rpx;
}
form{
	padding: 28rpx;
}
::v-deep .uni-forms-item__content{
	input{
		height: 100%;
	}
	.value{
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		image{
			width: 200rpx;
			height: 200rpx;
			border-radius: 24rpx;
		}
		.upload-btn{
			width: 200rpx;
			height: 72rpx;
			background: #E5EFF8 linear-gradient(95deg, #79B0FF 0%, #1B78FD 100%);
			border-radius: 8rpx;
			display:flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
.btn{
	margin: 28rpx;
	flex:1;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	view:nth-child(1){
		margin-right: 20rpx;
	}
	view{
		width: 100%;
		height: 72rpx;
		background: #E5EFF8 linear-gradient(95deg, #79B0FF 0%, #1B78FD 100%);
		border-radius: 8rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
}

</style>